<template>
  <div>
    <!-- 或者写home-header -->
    <HomeHeader :city="city"></HomeHeader>
    <HomeSwiper :list="swiperList"></HomeSwiper>
    <HomeIcons :list="iconList"></HomeIcons>
    <HomeRecommend :list="recommendList"></HomeRecommend>
    <HomeWeekend :list="weekendList"></HomeWeekend>
  </div>
</template>

<script>
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
import {mapState} from 'vuex'
  export default {
    name:"Home",
    components:{HomeHeader:()=>import('./components/Header'),HomeSwiper,HomeIcons,HomeRecommend,HomeWeekend},
    data(){
      return{
        // city:"",
        swiperList:[],
        iconList:[],
        weekendList:[],
        recommendList:[],
        lastCity:""
      }
    },
    computed: {
      ...mapState(["city"]),
      city:{
        get(){
          return this.$store.city
        },
        set(){
// 
        }
      }
    },
    methods: {
      getHomeInfo(){
        axios.get('/api/index.json?city='+ this.city).then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc(res){
        res=res.data
        if(res.ret && res.data){
          const data = res.data
          this.city = data.city;
          this.swiperList = data.swiperList;
          this.iconList = data.iconList;
          this.recommendList = data.recommendList;
          this.weekendList = data.weekendList;
        }
        
      }
    },
    mounted() {
      this.getHomeInfo()
    },
    activated(){  
      if(this.lastCity !== this.city){
        this.lastCity = this.city
        this.getHomeInfo()
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>